<template>
  <div class="app-container">
    <list-page
      :total="total"
      v-model:page-num="searchForm.pageNum"
      v-model:page-size="searchForm.pageSize"
      @getList="getList">
      <template #search>
        <list-search v-model="searchForm" @search="search">
          <el-form-item label="参数名称" prop="like.name">
            <el-input
              v-model="searchForm.like.name"
              placeholder="请输入参数名称"
              clearable
              @keyup.enter.native="search" />
          </el-form-item>
          <el-form-item label="参数键名" prop="where.config_key">
            <el-input
              v-model="searchForm.where.config_key"
              placeholder="请输入参数键名"
              clearable
              @keyup.enter.native="search" />
          </el-form-item>
        </list-search>
      </template>

      <template v-slot:actions>
        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPerm="['system:config:add']"
          >新增</el-button
        >
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="!selections.length"
          @click="handleDelete"
          v-hasPerm="['system:config:delete']"
          >删除</el-button
        >
        <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPerm="['system:config:export']"
          >导出</el-button
        >
        <el-button type="danger" plain icon="Refresh" @click="handleCache" v-hasPerm="['system:config:cache']"
          >刷新缓存</el-button
        >
      </template>

      <el-table v-loading="loading" :data="listData" @selection-change="handleSelection">
        <el-table-column type="selection" width="55" align="center" :selectable="canSelect" />
        <el-table-column label="编码" align="center" prop="id" min-width="60" />
        <el-table-column label="参数名称" align="center" prop="name" show-overflow-tooltip />
        <el-table-column label="参数键名" align="center" prop="config_key" show-overflow-tooltip />
        <el-table-column label="参数键值" align="center" prop="value" show-overflow-tooltip />
        <el-table-column label="系统内置" align="center" prop="is_sys" width="80">
          <template v-slot="{ row }"><dict-tag :options="sys_yes_no" :value="row.is_sys" /></template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
        <el-table-column label="创建时间" align="center" prop="create_time" min-width="140">
          <template v-slot="{ row }">{{ parseTime(row.create_time) }}</template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120" class-name="small-padding">
          <template v-slot="{ row }">
            <el-button link type="primary" icon="Edit" @click="handleEdit(row)" v-hasPerm="['system:config:edit']"
              >修改</el-button
            >
            <el-button
              link
              type="primary"
              icon="Delete"
              @click="handleDelete(row)"
              v-hasPerm="['system:config:delete']"
              v-if="row.is_sys !== '1'"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </list-page>
    <config-form :module-name="moduleName" v-model="formShow" :row="formData" @submit="getList" v-if="formShow" />
  </div>
</template>

<script setup name="Config">
  import ConfigForm from './form.vue'
  import { useListPage } from '@/utils/hook/list-page'
  import { delConfigApi, listConfigApi, refreshCacheApi, exportConfigApi } from '@/api/system/config'

  const { proxy } = getCurrentInstance()
  const { sys_yes_no } = proxy.useDict('sys_yes_no')

  const {
    moduleName,
    loading,
    total,
    listData,
    getList,
    searchForm,
    search,
    selections,
    handleSelection,
    formShow,
    formData,
    handleAdd,
    handleEdit,
    handleDelete,
    handleExport,
    handleCache
  } = useListPage({
    module: '参数配置',
    listFn: listConfigApi,
    deleteFn: delConfigApi,
    exportFn: exportConfigApi,
    cacheFn: refreshCacheApi
  })

  onMounted(() => {
    getList()
  })

  function canSelect(row) {
    return row.is_sys !== '1'
  }
</script>
